<html>
<head>
    <title>Options</title>
    <style type="text/css">
        body { width:500px; margin-left:auto; margin-right:auto; overflow:hidden; } 
        #page { padding:15px; }
        #header { padding-bottom:3px; border-bottom:1px dashed gray; font:24pt Tahoma,sans-serif; }
        #content { padding-top:10px; font:13pt Tahoma,sans-serif; }
        #message { padding-top:5px; opacity:0; color:gray; -webkit-transition:opacity 0.5s linear; }
        #accounts { padding-bottom:10px; }
        #accounts a { text-decoration:none; color:blue; }
        #connectAccount { color:#600000; }
        #connectInfo { font-size:10pt; color:gray; }
        #connectedAccount { display:none; color:green; }
    </style>
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript" src="options.js"></script>
</head>
<body>
    <div id="page">
        <div id="header">ShortenMe Options</div>
	<div id="content">
            <div id="accounts">
                <div id="connectAccount">Your Google account is not connected to this extension. <a id="connectLnk" href="#">Log in</a>
                    <div id="connectInfo">Connecting your account to this extension is not required, but it allows you to easily manage your shortened links and view their statistics at the goo.gl website.</div>
                </div>
                <div id="connectedAccount">Your Google account is connected to this extension. <a id="disconnectLnk" href="#">Log out</a></div>
            </div>
            <div id="settings">
                <input type="checkbox" id="copyLinkChk"> Automatically copy shortened link to clipboard<br>
                <input type="checkbox" id="showQrChk"> Display a QR code of the shortened link<br>
                <input type="checkbox" id="altIconChk""> Use alternate toolbar icon (<img src="icons/alt_action.png"> instead of <img src="icons/action.png">)<br>
                <div id="message">Settings saved successfully.</div>
            </div>
        </div>
    </div>
</body>
</html>